$(function() {
    load();
    // 存储数据的方式 var todolist = [{title:'xxx',done:false}]
    $('#title').on('keydown', function(e) {
        if (e.keyCode === 13) {
            if ($(this).val() === '') {
                alert('请输入需要完成的事情')
            } else {
                //读取本地存储
                // alert(11)
                var local = getData();
                // console.log(local);
                //把local数组进行更新数据 把最新的数据追加给local数组
                local.push({ title: $(this).val(), done: false });
                //把数组存储再本地存储中
                saveData(local);
                //把本地存储加载到页面
                load();
                $(this).val('');
            }
        };
    });
    //删除操作
    $('ul,ol').on('click', 'a', function() {
        //获取数据
        var data = getData();
        //修改数据
        var index = $(this).attr('id');
        //保存到本地存储
        // data.splice(从哪里开始删，删几个)
        data.splice(index, 1)
        saveData(data);
        //重新渲染页面
        load();
    })

    // 正在进行和已经完成的选项操作
    $('ol,ul').on('click', '#select', function() {
        //先获取本地存储数据
        var data = getData();
        //修改数据
        var index = $(this).siblings('a').attr('id');
        // console.log(index);
        data[index].done = $(this).prop('checked');
        console.log(data);
        // data[index] = $(this).prop('checked');
        //重新保存数据
        saveData(data);
        //重新渲染数据
        load();
    });
    //双击修改内容

    $('ol,ul').on('dblclick', 'p', function() {
        var e = $.Event("keyup"); //模拟一个键盘事件
        e.keyCode = 13; //keyCode=13是回车
        $('p').trigger(e);
        // console.log($(this));
        //获取数据
        var data = getData();
        console.log(data);
        //修改数据
        var index = $(this).siblings('a').attr('id');
        console.log(index);
        //获取元素文本内容
        var str = data[index].title;
        // var str = $(this).title;
        // console.log(str);
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        //在p中插入input
        $(this).html('<input type = "text" id="change">');
        // console.log($(this).children().html());
        $('#change').val(str);
        $('#change').focus().select();
        //失去焦点
        $(this).on('keyup', function(e) {
            if (e.keyCode === 13) {
                var newStr = $(this).children().val();
                data[index].title = newStr;
                console.log(data);
                $(this).html(newStr);
                // 重新保存数据
                saveData(data);
                // //重新渲染数据
                load();
            }
        });
    });
    //双击隐藏使用说明
    $('.clearDiv').on('dblclick', () => {
        $('.markDown').css('display', 'none')
    })


    //读取本地存储的数据
    function getData() {
        var data = localStorage.getItem('todolist');
        if (data != null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //保存本地存储数据
    function saveData(data) {
        localStorage.setItem('todolist', JSON.stringify(data));
    }
    // 渲染加载数据
    function load() {
        var data = getData();
        // console.log(data);
        //遍历之前清空数据库
        $('ul,ol').empty();
        var todoCount = 0;
        var doneCount = 0;

        //遍历数据
        // alert(11)
        $.each(data, function(i, n) {
            if (n.done) {
                $("ul").prepend("<li> <input type = 'checkbox' checked id='select'> <p>" + n.title + "</p> <a href='javascript:;' id = " + i + ">🐖</a> </li>");
                doneCount++;
            } else {
                $("ol").prepend("<li>  <input type = 'checkbox' id='select'> <p>" + n.title + "</p> <a href='javascript:;' id = " + i + ">🐖</a>  </li>");
                todoCount++;
            };
        })
        $('#todoCount').text('------------------------------' + todoCount);
        $('#doneCount').text('------------------------------' + doneCount);
    }

})